<template>
  <div class="home-container">
    <!-- 顶部个性化推荐卡片 -->
    <div class="recommendation-card">
      <h2>{{ recommendationTitle }}</h2>
      <p class="time">{{ recommendationTime }}</p>
      <button class="view-btn" @click="viewRecommendation">查看详情</button>
    </div>
    
    <!-- 中部最新功能区 -->
    <div class="section">
      <h3 class="section-title">最新功能</h3>
      <div class="latest-features">
        <div 
          v-for="feature in latestFeatures" 
          :key="feature.id" 
          class="feature-item"
          @click="navigateTo(feature.path)"
        >
          <div class="feature-icon">
            <img :src="feature.icon" :alt="feature.name">
          </div>
          <div class="feature-name">{{ feature.name }}</div>
        </div>
      </div>
    </div>
    
    <!-- 常用功能区 -->
    <div class="section">
      <h3 class="section-title">常用功能</h3>
      <div class="common-features">
        <div 
          v-for="feature in commonFeatures" 
          :key="feature.id" 
          class="common-feature-card"
          @click="navigateTo(feature.path)"
        >
          <div class="feature-icon">
            <img :src="feature.icon" :alt="feature.name">
          </div>
          <div class="feature-name">{{ feature.name }}</div>
          <div class="feature-desc">{{ feature.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../../stores/userStore'
import { useResourceStore } from '../../stores/resourceStore'
import apiService from '../../api'

const router = useRouter()
const userStore = useUserStore()
const resourceStore = useResourceStore()

// 个性化推荐数据
const recommendationTitle = ref('《人工智能概述》教学设计方案')
const recommendationTime = ref('2023-08-07 10:30')
const recommendationId = ref('')

// 最新功能数据
const latestFeatures = ref([
  {
    id: 1,
    name: '多媒体资源',
    icon: '/src/assets/icons/media.svg',
    path: '/media'
  },
  {
    id: 2,
    name: 'PPT主题生成',
    icon: '/src/assets/icons/ppt.svg',
    path: '/ppt'
  },
  {
    id: 3,
    name: '个性化定制',
    icon: '/src/assets/icons/custom.svg',
    path: '/custom'
  }
])

// 常用功能数据
const commonFeatures = ref([
  {
    id: 1,
    name: '教学设计',
    description: '快速生成完整的教学设计方案',
    icon: '/src/assets/icons/design.svg',
    path: '/design'
  },
  {
    id: 2,
    name: 'PPT主题生成',
    description: '智能生成教学PPT主题和大纲',
    icon: '/src/assets/icons/ppt.svg',
    path: '/ppt'
  },
  {
    id: 3,
    name: '多媒体资源',
    description: '生成教学所需的图像和视频资源',
    icon: '/src/assets/icons/media.svg',
    path: '/media'
  },
  {
    id: 4,
    name: '练习题',
    description: '根据知识点生成多种类型的练习题',
    icon: '/src/assets/icons/exercise.svg',
    path: '/exercise'
  },
  {
    id: 5,
    name: '试卷生成',
    description: '一键生成标准化试卷及答案',
    icon: '/src/assets/icons/paper.svg',
    path: '/paper'
  },
  {
    id: 6,
    name: '个性化定制',
    description: '基于学情数据的个性化教学资源',
    icon: '/src/assets/icons/custom.svg',
    path: '/custom'
  }
])

// 页面加载时获取个性化推荐
onMounted(async () => {
  // 初始化用户数据
  userStore.initUserData()
  
  try {
    // 获取个性化推荐
    // 实际项目中应该调用API获取推荐数据
    // const response = await apiService.resource.getList()
    // if (response && response.data && response.data.length > 0) {
    //   const recommendation = response.data[0]
    //   recommendationTitle.value = recommendation.title
    //   recommendationTime.value = recommendation.createdAt
    //   recommendationId.value = recommendation.id
    // }
  } catch (error) {
    console.error('获取推荐失败:', error)
  }
})

// 查看推荐详情
const viewRecommendation = () => {
  // 跳转到资源详情页
  if (recommendationId.value) {
    router.push(`/resource/detail?id=${recommendationId.value}`)
  } else {
    // 示例：跳转到教学设计页面
    router.push('/design')
  }
}

// 导航到指定页面
const navigateTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
.home-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 推荐卡片样式 */
.recommendation-card {
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  color: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recommendation-card h2 {
  margin: 0 0 10px 0;
  font-size: 1.5rem;
}

.recommendation-card .time {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 20px;
}

.view-btn {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 区块通用样式 */
.section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 1.2rem;
  margin-bottom: 16px;
  color: #333;
  font-weight: 600;
}

/* 最新功能区样式 */
.latest-features {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  cursor: pointer;
  transition: transform 0.2s;
}

.feature-item:hover {
  transform: translateY(-3px);
}

.feature-icon {
  width: 50px;
  height: 50px;
  background-color: #f0f5ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.feature-icon img {
  width: 28px;
  height: 28px;
}

.feature-name {
  font-size: 0.9rem;
  color: #333;
  text-align: center;
}

/* 常用功能区样式 */
.common-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.common-feature-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.common-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.common-feature-card .feature-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
}

.common-feature-card .feature-name {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.common-feature-card .feature-desc {
  font-size: 0.9rem;
  color: #666;
  text-align: center;
  line-height: 1.4;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .common-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .common-features {
    grid-template-columns: 1fr;
  }
}
</style>